<template>
  	<div>
      <head-top signin-up='home'>
          <span slot="logo" class="head_logo" @click="reload">ele2.me</span>
      </head-top>
      <nav class="city_nav">
          <div class="city_tip">
              <span>当前定位城市：</span>
              <span>定位不准时，请在城市列表中选择</span>
          </div>
          <router-link :to="'/city/'+guessCityid" class="guesscity">
                <span>{{guessCity}}</span>
                <span class="gt">&gt;</span>
          </router-link>
      </nav>
      <section>
          <h4 class="city_title">热门城市</h4>
          <ul class="city_name clear">
              <router-link class="ellipsis" tag="li" v-for="item in hotCity" :to="'/city/' + item.id" :key="item.id">
                {{item.name}}
              </router-link>
          </ul>
      </section>
      <section class="group_city_container">
          <ul class="letter_classify">
              <li class="letter_classify_li" v-for="(value, key, index) in sortgroupcity" :key="key">
                    <h4 class="city_title">{{key}}
                        <span v-if="index == 0">(按字母排序)</span>
                    </h4>
                    <ul class="city_name clear">
                        <router-link class="ellipsis" tag="li" v-for="item in value" :key="item.id" :to="'/city/' + item.id">
                            {{item.name}}
                        </router-link>
                    </ul>
              </li>
          </ul>
          
      </section>
    </div>
</template>

<script>
    // import headTop from '../../components/header/head'
    import {cityGuess,cityHot,cityAll} from '../../api/api'

    export default {
        data(){
            return {
                guessCity:'',  //当前城市
                guessCityid:'',  //当前城市id
                hotCity:[],     //热门城市列表
                allCity:[],     //所有城市列表
            }
        },

        mounted(){
            //获取当前城市
            cityGuess().then((res) => {
                this.guessCity = res.data.name;
                this.guessCityid = res.data.id;
            });
            //获取热门城市列表
            cityHot().then((res)=>{
                this.hotCity = res.data;
            });
            //获取所有城市列表
            cityAll().then((res)=>{
                this.allCity = res.data;
            })

        },
        computed:{
            //将获取的数据按照A-Z字母开头排序
            sortgroupcity(){
                let sortobj = {};
                for (let i = 65; i <= 90; i++) {
                    if (this.allCity[String.fromCharCode(i)]) {
                        sortobj[String.fromCharCode(i)] = this.allCity[String.fromCharCode(i)];
                    }
                }
                return sortobj
            }
        },

        methods:{
            //点击图标刷新页面
            reload(){
                window.location.reload();
            }
        }
    }


</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  .head_logo{
      left:0.4rem;
      font-weight: normal;
      @include sc(0.7rem, #fff);
      @include wh(2.3rem, 0.7rem);
      @include ct;
  }
  .city_nav{
      padding-top:2.35rem;
      margin-bottom: 0.4rem;
      background-color: #fff;
      border-top: 1px solid $bc;
      .city_tip{
            @include fj;
            padding:0 .5rem;
            line-height: 1.45rem;
            font-size:0.55rem;
            color:#666;
            span:nth-of-type(1){
                @include sc(0.55rem, #666);
            }
            span:nth-of-type(2){
                font-weight: 900;
                @include sc(0.475rem, #9f9f9f);
            }
      }
      .guesscity{
           @include fj;
           padding:0 .5rem;
           border-top:1px solid #e4e4e4;
           border-bottom:2px solid #e4e4e4;
          @include font(0.75rem, 1.8rem);
          span:nth-of-type(1){
              color:#3190e8;
          }
      }
      
  }
  .city_title{
        padding-left:.5rem;
        background-color: #fff;
       @include font(0.6rem,1.75rem);
       span{
           padding-left:0.5rem;
            @include sc(0.475rem, #999);
       }
  }
  .city_name{
      background-color: #fff;
      li{
          float:left;
          @include wh(25%,1.75rem);
          @include font(0.6rem,1.75rem);
          text-align: center;
          color: $blue;
          border-bottom: 0.025rem solid #e4e4e4;
          border-right: 0.025rem solid #e4e4e4;
        }
        li:nth-of-type(4n){
            border-right: none;
        }
  }
  .group_city_container{
       margin-top:0.4rem;
      .letter_classify_li{
          margin-bottom:0.4rem;
      }
      .city_name{
          li{
            color: #666;
          }
      }
  }
   

</style>
